
<!doctype html>
<!--[if lte IE 7 ]><html class="no-js ie lte7 lte8 lte9 "><![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8 lte8 lte9 "><![endif]-->
<!--[if IE 9 ]><html class="no-js ie ie9 lte9 "><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Amaze UI 是一个移动优先的跨屏前端框架。">
<meta name="keywords"
	content="HTML, HTML5, CSS, CSS3, JS, JavaScript, framework, Amaze UI, front-end, frontend, web development, 前端框架，开源">
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Amaze UI | 中国首个开源 HTML5 跨屏前端框架 | Amaze UI</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="alternate icon" type="image/png"
	href="http://a.static.amazeui.org/assets/2.x/i/favicon.png">
<link rel="apple-touch-icon-precomposed"
	href="http://a.static.amazeui.org/assets/2.x/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image"
	media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"
	href="http://a.static.amazeui.org/assets/2.x/i/startup-640x1096.png">
<link rel="stylesheet"
	href="http://a.static.amazeui.org/assets/2.x/css/amazeui.min.css">
<link rel="stylesheet"
	href="http://a.static.amazeui.org/assets/2.x/css/amaze.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="http://a.static.amazeui.org/assets/2.x/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="http://a.static.amazeui.org/assets/2.x/js/polyfill/rem.min.js"></script>
<script src="http://a.static.amazeui.org/assets/2.x/js/polyfill/respond.min.js"></script>
<script src="http://a.static.amazeui.org/assets/2.x/js/amazeui.legacy.js"></script><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="http://a.static.amazeui.org/assets/2.x/js/amazeui.min.js"></script>
<!--<![endif]-->
<link rel="canonical" href="http://amazeui.org?_ver=2.x" />
</head>
<body class="amz-index" data-amui="2.x">
	<!--[if lte IE 9 ]><div class="am-alert am-alert-danger ie-warning" data-am-alert>
  <button type="button" class="am-close">&times;</button>
  <div class="am-container">
    365 安全卫士提醒：你的浏览器太古董了，妹子无爱，<a
    href="http://browsehappy.com/" target="_blank">还不速速换一个</a>！</div></div><![endif]-->
	<header id="amz-header">
		<div class="amz-container am-cf">
			<h1>
				<a href="/">Amaze UI</a> <span class="am-badge am-badge-danger">2.0</span>
			</h1>
			<button class="am-btn am-btn-primary am-show-sm-only"
				data-am-collapse="{target: '.amz-header-nav'}">
				<span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
			</button>
			<nav>
				<ul class="amz-header-nav am-collapse">
					<li><a href="/getting-started">开始使用</a></li>
					<li><a href="/css">CSS</a></li>
					<li><a href="/javascript">JS 插件</a></li>
					<li><a href="/widgets">Web 组件</a></li>
					<li><a href="/1.x">v1.x</a></li>
					<li class="amz-cse"><form
							action="http://zhannei.baidu.com/cse/search" method="get"
							target="_blank" class="cse-form">
							<input type="hidden" name="s" value="13988471460650623274">
							<input type="hidden" name="entry" value="1"> <input
								type="text" required name="q" placeholder="搜索">
							<button>
								<span class="am-icon-search"></span>
							</button>
						</form></li>
				</ul>
			</nav>
		</div>
	</header>
	<div id="amz-home">
		<section id="amz-hero">
			<div class="amz-container am-cf">
				<div class="amz-mascot"
					data-am-scrollspy="{animation: 'slide-left', delay: 100}">
					<img src="http://a.static.amazeui.org/assets/2.x/i/ui/mascot.png"
						alt="mascot-xiaoMeng" />
				</div>
				<div class="amz-hero-intro">
					<div class="amz-hero-headings">
						<h1 data-am-scrollspy="{animation:'slide-left'}">Amaze UI</h1>
						<h2 data-am-scrollspy="{animation:'slide-right', delay: 500}">中国首个开源
							HTML5 跨屏前端框架</h2>
						<h3
							data-am-scrollspy="{animation:'slide-bottom', delay: 1000, repeat: false}">期待你的参与，共同打造一个简单易用的前端框架!</h3>
					</div>
					<ul class="github-status">
						<li><a
							href="https://github.com/allmobilize/amazeui/stargazers"
							target="_blank"><span class="am-icon-star"></span> <span
								id="ghs-stargazers"></span> Stars</a></li>
						<li><a
							href="https://github.com/allmobilize/amazeui/network/members"
							target="_blank"><span class="am-icon-code-fork"></span> <span
								id="ghs-forks"></span> Forks</a></li>
					</ul>
					<div class="github-status"></div>
					<div class="amz-btn-started"
						data-am-scrollspy="{animation:'scale-up', delay: 1500, repeat: false}">
						<a href="/getting-started?_ver=2.x"
							class="am-btn am-btn-success am-btn-lg">开始使用</a> <a
							href="https://github.com/allmobilize/amazeui"
							class="am-btn am-btn-default am-btn-lg">贡献代码</a>
					</div>
				</div>
			</div>
			<div class="amz-notify">
				<form id="subscribe-form">
					<div class="am-g am-g-fixed">
						<div class="col-md-6 am-u-md-6 notify-latest">
							<a href="/download?ver=2.0.0"><span class="amz-notify-date">2014-12-05</span>
								<span class="amz-notify-divider">|</span> <span>Amaze UI
									v2.0.0 正式版发布</span></a>
						</div>
						<div class="col-md-4 am-u-md-4 am-text-right subscribe-field">
							<input class="am-form-field ipt-email" id="subscribe-email"
								type="email" required placeholder="请输入 Email" autocomplete="off">
						</div>
						<div class="col-md-2 am-u-md-2">
							<button id="subscribe-submit"
								class="am-btn am-btn-secondary am-btn-block" type="submit">订阅更新</button>
						</div>
						<div
							class="col-md-6 am-u-md-6 am-alert am-alert-danger subscribe-alert"
							id="subscribe-msg-error">
							<button type="button" class="am-close">&times;</button>
							<p></p>
						</div>
						<div
							class="col-md-6 am-u-md-6 am-alert am-alert-warning subscribe-alert"
							id="subscribe-msg-success">
							<button type="button" class="am-close">&times;</button>
							<p></p>
						</div>
					</div>
				</form>
			</div>
		</section>
		<section class="amz-features">
			<div class="am-g am-g-fixed">
				<div class="col-md-6 am-u-md-6"
					data-scrollspy="{animation:'slide-left', delay: 0}">
					<img class="am-img-responsive img"
						src="http://a.static.amazeui.org/assets/2.x/i/ui/foundation.png"
						alt="foundation" />
					<h2>为移动而生</h2>
					<p>Amaze UI 以移动优先（Mobile
						first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。</p>
				</div>
				<div class="col-md-6 am-u-md-6"
					data-scrollspy="{animation:'slide-top', delay: 500}">
					<img class="am-img-responsive"
						src="http://a.static.amazeui.org/assets/2.x/i/ui/web.png"
						alt="web" />
					<h2>组件丰富，模块化</h2>
					<p>Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Web
						组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。</p>
				</div>
			</div>
			<div class="am-g am-g-fixed">
				<div class="col-md-6 am-u-md-6"
					data-scrollspy="{animation:'slide-right', delay: 1000}">
					<img class="am-img-responsive img"
						src="http://a.static.amazeui.org/assets/2.x/i/ui/chinese.png"
						alt="chinese" />
					<h2>本地化支持</h2>
					<p>相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App
						内置浏览器兼容支持。</p>
				</div>
				<div class="col-md-6 am-u-md-6"
					data-scrollspy="{animation:'slide-bottom', delay: 1500}">
					<img class="am-img-responsive img"
						src="http://a.static.amazeui.org/assets/2.x/i/ui/mobile.png"
						alt="mobile" />
					<h2>轻量级，高性能</h2>
					<p>Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web
						应用更快速载入。</p>
				</div>
			</div>
		</section>
		<section class="amz-credits">
			<div class="amz-container">
				<header>
					<h1 data-am-scrollspy="{animation:'fade'}">站在巨人的肩膀上</h1>
					<h2 data-scrollspy="{animation:'slide-bottom', delay: 500}">Amaze
						UI 汲取了很多优秀的社区资源，通过开源的形式来回馈社区。</h2>
				</header>
			</div>
			<div class="am-g am-g-fixed amz-credits-list">
				<div class="col-md-4 am-u-md-4"
					data-scrollspy="{animation:'scale-up', delay: 1000}">
					<h2>MIT License</h2>
					<p>
						Amaze UI 使用 <a
							href="https://github.com/allmobilize/amazeui/blob/master/LICENSE.md"
							target="_blank">MIT 许可证</a>发布，用户可以自用使用、复制、修改、合并、出版发行、散布、再授权及贩售
						Amaze UI 及其副本。
					</p>
				</div>
				<div class="col-md-4 am-u-md-4"
					data-scrollspy="{animation:'scale-up', delay: 1500}">
					<h2>Heroes</h2>
					<p>
						<a
							href="https://github.com/allmobilize/amazeui#%E5%8F%82%E8%80%83%E4%BD%BF%E7%94%A8%E7%9A%84%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE"
							target="_blank">参考、使用的项目</a>：jQuery, Zepto.js, Seajs, LESS,
						normalize.css, FontAwesome, Bootstrap, Foundation, UIKit, Pure,
						Framework7, etc.
					</p>
				</div>
				<div class="col-md-4 am-u-md-4"
					data-scrollspy="{animation:'scale-up', delay: 2000}">
					<h2>Credits</h2>
					<p>
						我们追求卓越，然时间、经验、能力有限。Amaze UI 有很多不足的地方，希望大家包容、不吝赐教，给我们提意见、建议。<a
							href="/getting-started/credits?_ver=2.x">感谢你们</a>！
					</p>
				</div>
			</div>
		</section>
	</div>
	<footer class="amz-footer">
		<div class="am-g am-g-fixed">
			<div class="col-md-4 col-md-push-8 am-u-md-4 am-u-md-push-8">
				<ul class="amz-social">
					<li><a href="javascript: void(0)"
						data-am-popover="{content: 'Amaze UI 交流 Q 群：374946651'}"
						title="Amaze UI 用户交流群" target="_blank"><span
							class="am-icon-qq"></span></a></li>
					<li><a href="http://weibo.com/allmobilize" title="云适配微博"
						target="_blank"><span class="am-icon-weibo"></span></a></li>
					<li><a href="#am-wechat" title="云适配微信" data-am-modal><span
							class="am-icon-wechat"></span></a></li>
					<li><a
						href="https://github.com/allmobilize/amazeui/issues/new?title=Bug%3A%20&body=**%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0**%0A%0A%EF%BC%88%E6%8F%8F%E8%BF%B0%E4%B8%80%E4%B8%8B%E9%97%AE%E9%A2%98%EF%BC%89%0A%0A**%E4%BA%A7%E7%94%9F%E7%8E%AF%E5%A2%83**%0A%0A-%20%E8%AE%BE%E5%A4%87%EF%BC%9A%EF%BC%88%E6%89%8B%E6%9C%BA%E3%80%81%E5%B9%B3%E6%9D%BF%E7%AD%89%E7%A7%BB%E5%8A%A8%E8%AE%BE%E5%A4%87%E6%97%B6%E5%A1%AB%E5%86%99%E6%AD%A4%E9%A1%B9%EF%BC%89%0A-%20%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80%EF%BC%9A%0A%0A**%E5%A4%8D%E7%8E%B0%E6%AD%A5%E5%A5%8F**%0A%0A1.%20%0A2.%20%0A..."
						target="_blank" title="Bug 反馈"><span
							class="am-icon-paper-plane"></span></a></li>
				</ul>
			</div>
			<div class="col-md-8 col-md-pull-4 am-u-md-8 am-u-md-pull-4">
				<h2 class="amz-fd">
					<a>云适配</a>
				</h2>
				<ul class="amz-links">
					<li><a href="/about/wantu" class="am-icon-heart">&nbsp;妹子招亲</a>
						| <a href="/about/contact">联系我们</a> | <a href="/about/resources">品牌相关</a></li>
				</ul>
				<p class="amz-cp">
					&copy; 2014 AllMobilize, Inc. Licensed under <a
						href="http://opensource.org/licenses/MIT" target="_blank">MIT
						license</a>. Developed with <a
						href="http://www.jetbrains.com/webstorm/" target="_blank">WebStorm</a>.
				</p>
			</div>
		</div>
	</footer>
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="am-wechat">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">
				<a href="" class="am-close am-close-spin" data-am-modal-close>&times;</a>
			</div>
			<div class="am-modal-bd">
				<img src="http://a.static.amazeui.org/assets/2.x/i/am/qr-wechat.jpg"
					alt="云适配微信" /><br />在微信上关注我们
			</div>
		</div>
	</div>
	<div class="amz-toolbar" id="amz-toolbar">
		<a href="#top" title="回到顶部" class="am-icon-btn am-icon-arrow-up"
			id="amz-go-top"></a> <a href="/getting-started/faq" title="常见问题"
			class="am-icon-faq am-icon-btn am-icon-question-circle"></a>
	</div>
	<!--[if (gte IE 9)|!(IE)]><!-->
	<script>!function(e){e(function(){function s(s){s=s||{},s.stargazers_count&&e("#ghs-stargazers").text(s.stargazers_count),s.forks&&e("#ghs-forks").text(s.forks)}function t(){if(n&&n.enabled){var e=n.get("_amazeui_github_status");e&&e.last_update&&(new Date).getTime()-e.last_update<432e5?s(e):a()}else a()}function a(){e.ajax({dataType:"json",url:"https://api.github.com/repos/allmobilize/amazeui",success:function(e){e&&(s(e),e&&n&&n.enabled&&(e.last_update=(new Date).getTime(),n.set("_amazeui_github_status",e)))},error:function(e){window.console&&console.log(e)}})}var n=window.store,i=e("#subscribe-form"),o=i.find("#subscribe-email"),r=i.find("#subscribe-submit"),u=e("#subscribe-msg-error"),d=u.find("p"),l=e("#subscribe-msg-success"),c=l.find("p"),m="订阅时发生错误，请在评论中留言反馈！",b="am-animation-slide-top",f="am-animation-fade am-animation-reverse",p=e.AMUI.support.animation;i.on("submit",function(s){s.preventDefault();var t=o.val();return/.+@.+\..+/i.test(t)?(r.button({loadingWithSpinner:'<span class="am-icon-circle-o-notch am-icon-spin"></span> 提交中...'}).button("loading"),o.attr("disabled","disabled"),r.attr("disabled","disabled"),e.ajax({type:"POST",url:"/user/subscribe",data:{user:{email:t}},dataType:"json",success:function(e){0==e.status?(d.html(11e3===e.errCode?"邮箱已经存在，静候 Amaze 传书吧！":m),u.show().addClass(b),o.removeAttr("disabled"),r.removeAttr("disabled"),r.button("reset")):(u.hide(),c.html("提交成功，请查收邮件点击确认链接！"),l.show().addClass(b))},error:function(){u.html(m)}}),u.on(p&&p.end,function(){e(this).removeClass(b)}),void l.on(p&&p.end,function(){e(this).removeClass(b)})):(o.focus(),!1)}),i.find(".am-close").on("click",function(){var s=e(this),t=s.parent(".am-alert");p?(t.addClass(f),t.one(p.end+".close.alert",function(){t.removeClass(f).hide()})):t.hide()}),t()})}(window.jQuery||window.Zepto,window);</script>
	<!--<![endif]-->
	<!--[if (gte IE 9)|!(IE)]><!-->
	<script
		src="http://a.static.amazeui.org/assets/2.x/js/ZeroClipboard.min.js"></script>
	<!--<![endif]-->
	<script
		src="http://a.static.amazeui.org/assets/2.x/js/handlebars.min.js"></script>
	<script src="http://a.static.amazeui.org/assets/2.x/js/main.min.js"></script>
	<script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="//hm.baidu.com/hm.js?b424d39312c46404f15e22574a531fbb",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}(),function(e,t,a){function n(){!function(e,t,a,n,c,o,m){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),m=t.getElementsByTagName(a)[0],o.async=1,o.src=n,m.parentNode.insertBefore(o,m)}(e,t,a,"//www.google-analytics.com/analytics.js","ga"),ga("create","UA-34196034-8","amazeui.org"),ga("send","pageview")}e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent&&e.attachEvent("onload",n)}(window,document,"script");</script>
</body>
</html>
<!-- Cached page generated on Mon Dec 08 2014 02:52:30 GMT+0000 (UTC) -->